<html>

<head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/echarts@4.2.1/dist/echarts.js"></script>
    <script src="../dist/anikyu.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" />
    <style>
        .echart-conatiner {
            width: 50%;
            height: 50%;
            resize: both;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="echart-conatiner"></div>
    </div>

    <script>
        var getStyle = function (node) {
            return window.getComputedStyle(node, false);
        }
        //----------------------------------
        var xStageDeltaArr = [], xFrameDeltaArr = [], xNameArr = []

        var myChartContainer = document.querySelector('.echart-conatiner');
        var myChart = echarts.init(myChartContainer);

        var originSize = [parseInt(getStyle(myChartContainer).width), parseInt(getStyle(myChartContainer).height)];

        var option = {
            title: { text: '变化率测试' },
            tooltip: {},
            legend: {},
            xAxis: {
                type: 'category',
                data: xNameArr
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: '每帧变化',
                    type: 'line',
                    data: xStageDeltaArr,
                    symbol: 'none'
                },
            ],
            animation: false
        };

        myChart.setOption(option);

        console.log(myChart)

        //------------------------------------

        document.querySelector('.echart-conatiner').addEventListener('resize', function () {
            myChart.resize();
        })

            + (function watchContainerResize() {
                var newSize = [parseInt(getStyle(myChartContainer).width), parseInt(getStyle(myChartContainer).height)];
                if (originSize[0] !== newSize[0] || originSize[1] !== newSize[1]) {
                    myChart.resize();
                    originSize = newSize.concat();
                }
                requestAnimationFrame(watchContainerResize)
            })()

        // ---------------------------------------------
        let obj = {}
        let ani = new Anikyu(obj, [
            {
                props: {
                    a: 0
                },
            },
            {
                duration: 4000,
                easeType: 'step',
                step: 10,
                props: {
                    a: 200
                }
            }
        ])
        ani.addEventListener('animate', function (e) {
            xNameArr.push(' ')
            console.log(e)
            xStageDeltaArr.push(e.detail.stageDelta.a);
            xFrameDeltaArr.push(e.detail.frameDelta.a);

            myChart.setOption({
                series: [
                    {
                        name: '每帧变化',
                        type: 'line',
                        data: xFrameDeltaArr,
                        symbol: 'none'
                    },
                ],
            });
        })
        //------------------------------------

    </script>
</body>

</html>